<template>
  <RouterView />
  <dl class="hotkey" :class="[settingStore.$state.deskAppRangeType]">
    <dt>{{ $t('default.copyWeb') }}</dt>
    <dd>{{ $t('default.frame') }}: Vue3.2</dd>
    <dd>{{ $t('default.auth') }}: Fivexu</dd>
    <dd>QQ: 316643470</dd>
    <dd>{{ $t('default.email') }}: 316643470@qq.com</dd>
    <dd>{{ $t('default.weChat') }}: wuxu316643470</dd>
    <dt class="pt10">{{ $t('default.hotkey') }}:</dt>
    <dd>Alt + L: {{ $t('default.lock') }}</dd>
    <dd>Alt + P: {{ $t('default.projection') }}</dd>
    <dd>Alt + E: {{ $t('default.file') }}</dd>
    <dt class="pt10">{{ $t('default.tip') }}:</dt>
    <dd>{{ $t('default.video') }}</dd>
  </dl>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

const settingStore = useSystemSettingStore()

onMounted(() => {
  settingStore.refreshDate()
  const ios = settingStore.$state.deskAppRangeType === 'ios'
  document.body.dataset.theme = ios ? 'ios' : settingStore.$state.deskTheme
  document.body.addEventListener('contextmenu', (ev: MouseEvent) => {
    ev.preventDefault()
    ev.stopPropagation()
  })
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.hotkey {
  max-width: 200px;
  position: fixed;
  right: 20px;
  top: 20px;
  padding: 20px;
  color: var(--base-font);
  background-color: var(--task-bar-bg-color);

  &.ios {
    top: 60px;
  }

  dt {
    font-size: 14px;
    margin-bottom: 5px;
  }

  dd {
    margin-bottom: 5px;
  }
}
</style>
